<template>
	<view class="cu-card dynamic" :class="isCard?'no-card':''">
		<view v-for="(item, index) in props.list" @click="handleSelect(item)" :key="index"
			class="cu-item shadow boxs-content">
			<view class="cu-list menu-avatar">
				<view class="cu-item">
					<view class="cu-avatar round lg" :style="'background-image:url('+item.avatarUrl+');'">
					</view>
					<view class="content flex-sub">
						<view class="text-size-34 text-bold text-black">{{item.userName}}</view>
						<view class="text-size-26 text-gray">
							{{item.endTime}}
						</view>
					</view>
					<view class="action cu-tag round bg-menu ">最新</view>
				</view>
			</view>
			<view class="text-content padding-top">
				<view class="text-size-32 text-bold text-black">
					{{item.productName}}
				</view>
				<view>
					<text class="text-size-32 text-red">￥{{item.price}}</text>
					<text class="text-del text-size-28 text-gray margin-left">￥{{item.originalPrice}}</text>
				</view>
			</view>
			<view class="grid flex-sub padding-lr" :class="isCard?'col-3 grid-square':'col-1'">
				<view class="bg-img" :class="isCard?'':'only-img'"
					:style="{backgroundImage:'url('+item.thumbnail+');'}">
				</view>
			</view>
			<view class=" padding-tb-xs padding-lr-sm padding-lr">
				<view class="flex justify-content-between bg-gray align-center radius padding-lr-xs">
					<view class="flex text-left align-center">
						<view class="cu-avatar-group">
							<view class="cu-avatar round" v-for="(item,index) in avatarList" :key="index"
								:style="[{ backgroundImage:'url(' + avatarList[index] + ')' }]"></view>
						</view>
						<view class="text-center text-size-14 text-menu-color">
							<text class="margin-left-xs   ">{{item.count}}人跟团</text>
							<text class="margin-left-xs   ">{{item.readNum}}人看过</text>
						</view>
					</view>
					<view class="align-center">
						<button @click.stop="handleShare(item)"
							class="cu-btn radius line-green sm margin-lr-xs">分享</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { useSettingStore } from '@/stores/index';
	const setting = useSettingStore();
	const emit = defineEmits(['action', 'share']);
	const props = defineProps({
		isCard: {
			type: [Boolean, String],
			default: false
		},
		list: {
			default: () => {
				return [{
					"id": "30325946712000134",
					"shopId": "17379006305000199",
					"communityId": "18853483084000176",
					"name": "测试",
					"productName": "测试",
					"price": 10.00,
					"originalCost": 20.00,
					"total": 100,
					"lastTotal": 100,
					"readNum": 0,
					"count": 0,
					"state": 1,
					"groupType": 1,
					"startTime": "2024-03-18 12:53:13",
					"endTime": "2024-03-18 12:53:13",
					"sort": 1,
					"enable": true,
					"description": "测试",
					"videoUrl": null,
					"thumbnail": null,
					"userId": "0",
					"userName": "常江",
					"avatarUrl": "http://1.14.105.213:9090/api/upload/2024-01-05/10760ce22c6d4f14989a1e8851e002e4.jpg"
				}]
			}
		}
	});
	const avatarList = ref([
		'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
		'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg',
		'https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg'
	])
	const handleSelect = (e : any) => {
		emit('action', e, 0);
	};
	const handleShare = (item : any) => {
		uni.navigateTo({
			url: '/pages/groupon/detail?id=' + item.id + '&share=' + 1
		});
	}
	const handleWrite = (item : any) => {
		uni.navigateTo({
			url: '/manage/coupon/create?shopId=' + item.shopId + '&id=' + item.id
		});
	}
</script>

<style lang="scss">
	.cu-avatar-group .cu-avatar {
		margin-left: -40rpx;
		border: 4rpx solid #f1f1f1;
		vertical-align: middle;
	}

	.boxs-content {
		margin: 20rpx 0;
		border-radius: $border-radius-lg;
		padding: 10rpx 10rpx;
		background-color: $bg-color-white;
		box-shadow: 0px 2px 4px 0px rgba(200, 200, 200, 0.5), 0px 2px 4px 0px rgba(200, 200, 200, 0.5);
	}
</style>